<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="./demo.css">
<link rel="stylesheet" href="./download/font_3468125_szvzd6729cc/iconfont.css">
<div id="root">
    <div class="meau" :style="{width:menuWidth + 'px'}">
        <ul>
            <li @click="who = 'index'">
                <span class="iconfont icon-yingyongzhongxin
                "></span>
                {{menuWidth === 200 ? '后台首页' : ''}}
            </li>
            <li @click="who = 'houtai'">
                <span class="iconfont icon-yingyongzhongxin
                "></span>
                {{menuWidth === 200 ? '商品管理' : ''}}
            </li>
            <li @click="who = 'welcome'">
                <span class="iconfont icon-yingyongzhongxin
                "></span> 
                {{menuWidth === 200 ? '订单管理' : ''}}
            </li>
    
        </ul>
    </div>
    <div class="main">
        <div class="top">
            <span :class="['iconfont',state === false ? 'icon-shouqicaidan': 'icon-zhankaicaidan']" @click="changeFn"></span>
            <span @click="who='index'">后台&gt;</span>
            <!-- <span @click="who='houtai'">后台</span>/
            <span @click="who='welcome'">欢迎页</span> -->

            <!-- 添加多元素过渡 -->
            <transition
            appear
            enter-active-class="animated fadeInRight"
            >
                    <span
                v-for="item in menuList"
                v-if="item.who === who"
                >{{ item.menu1 }}  &gt;  {{ item.menu2 }}
                </span>
            </transition>
        </div>
        <div class="content">
            <transition
            appear
            enter-active-class="animated fadeInRight"
            >
                <component :is="who"></component>
            </transition>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('index',{template:`<h1>index</h1>`})
Vue.component('houtai',{template:`<h1>houtai</h1>`})
Vue.component('welcome',{template:`<h1>welcome</h1>`})
const vm = new Vue({
    el: "#root",
    data: {
        who:'index',
        state:false,
        menuWidth:200,
        menuList:[
            {menu1:'首页',menu2:'欢迎页',who:'index'},
            {menu1:'商品管理',menu2:'列表',who:'houtai'},
            {menu1:'订单管理',menu2:'列表',who:'welcome'},
        ]
    },
    methods:{
        changeFn(){
            this.menuWidth =  this.menuWidth === 200 ? 64 : 200
            this.state = !this.state
        }
    }
})
</script>